<template>
	<div class="newPage-veriface">
		<x-header :left-options="{backText: ''}" class="newPage-head">人脸识别</x-header>
		<div class="status">
			<img src="../../assets/msg-imgs/msh_role06.png" />
			<p>你并不是一无所有，你还有记忆呀<br />请凭记忆自觉申请...</p>
		</div>
		<div class="veriface-box">
			<p>
				<img class="person" src="../../assets/msg-imgs/ic_face_recognition_center.png" />
				<span>按照以下要求可提高通过率</span>
			</p>
			<ul>
				<li>
					<img src="../../assets/msg-imgs/hat.png" style="width:.7rem"/>
					<span>脱下帽子</span>
				</li>
				<li>
					<img src="../../assets/msg-imgs/glass.png" style="width:.66rem"/>
					<span>摘下眼镜</span>
				</li>
				<li>
					<img src="../../assets/msg-imgs/bulb.png" style="width:.42rem"/>
					<span>调整光线</span>
				</li>
			</ul>
		</div>
		<button class="btn-next">开始识别</button>
		<div class="contact-user">
			<span>联系客服</span>
		</div>
	</div>
</template>

<script>
	import { XHeader, XInput, Group, Cell } from 'vux'
	export default {
		components: {
	      XHeader,
	      XInput,
	      Group,
	      Cell
	    },
	    created(){
	      document.title = '马上花';
	    },
	    data () {
	      return {
	        show: false
	      }
	    }
	}
</script>

<style lang="less">
	@import '../styles/main.less';
	body {
		background: #FFF;
	}
	.newPage-veriface {
		.status {
			text-align: center;
			padding: .2rem 0;
			background-color: #F2F2F2;
			p {
				font-size: .28rem;
				margin-top: .1rem;
			}
		}
		.veriface-box {
			text-align: center;
			img.person {
				width: 2.4rem;
				display: block;
				margin: .5rem auto;
			}
			span {
				font-size: .26rem;
				color:#464646;
			}
			ul {
				text-align: center;
				margin-top: .5rem;
				li{
					display: inline-block;
					text-align: center;
					margin: 0 .2rem;
					img {
						display: block;
						margin: 0 auto;
					}
					span {
						font-size: .26rem;
					}
				}
			}
		}
		.contact-user {
			margin: .5rem 0;
			text-align: center;
			span {
				font-size: .26rem;
				color: #909090;
			}
		}
	}
</style>	